<template>
  <div>
    <el-sub-menu v-if="hasChildren" :index="route.path">
      <template #title>
        <span>{{ route.meta?.title }}</span>
      </template>
      <DynamicMenu v-for="child in route.children" :key="child.path" :route="child" />
    </el-sub-menu>
    <el-menu-item v-else :index="route.path">
      <el-icon><GoodsFilled /></el-icon>
      <template #title>{{ route.meta?.title }}</template>
    </el-menu-item>
  </div>
</template>

<script setup>
import { computed } from "vue";

// 接受传递的 route 参数
const props = defineProps({
  route: {
    type: Object,
    required: true,
  },
});

// 判断是否有子菜单
const hasChildren = computed(() => props.route.children && props.route.children.length > 0);
const parentGroups = {};

// // 遍历 layoutRoutes，将具有相同 parent 的项聚合
// layoutRoutes.forEach((item) => {
//   if (item.meta && item.meta.parent) {
//     const parentKey = item.meta.parent;
//     if (!parentGroups[parentKey]) {
//       parentGroups[parentKey] = {
//         title: parentKey, 
//         children: [],
//       };
//     }
//     parentGroups[parentKey].children.push(item);
//   }
// });

// // 转换对象为数组并处理子路由
// const groupedRoutes = Object.values(parentGroups);

// // 最终处理后的路由
// const processedLayoutRoutes = [
//   ...layoutRoutes.filter((item) => !item.meta?.parent),
//   ...groupedRoutes,
// ];

// console.log(processedLayoutRoutes, "处理后的路由表");

</script>
